﻿<MContainer Class="pa-4 text-center hover-misc-list">
    <MRow Class="fill-height" Align="AlignTypes.Center" Justify="JustifyTypes.Center">
        @foreach (var item in _items)
        {
            <MCol Cols="12" Md="4">
                <MHover>
                    <MCard @attributes="context.Attrs"
                           Class="@($"{(context.Hover ? "on-hover" : "")}")"
                           Elevation="@(context.Hover ? 12 : 2)">
                        <MImage Src="@item.Img" Height="225">
                            <MCardTitle Class="text-h6 white--text">
                                <MRow Class="fill-height flex-column" Justify="JustifyTypes.SpaceBetween">
                                    <p class="mt-4 subheading text-left">@item.Title</p>

                                    <div>
                                        <p class="ma-0 text-body-1 font-weight-bold font-italic text-left">@item.Text</p>
                                        <p class="text-caption font-weight-medium font-italic text-left">@item.SubText</p>
                                    </div>

                                    <div class="align-self-center">
                                        @foreach (var icon in _icons)
                                        {
                                            <MButton Class="@(context.Hover ? "show-btns" : "")" Color="transparent" Icon>
                                                <MIcon Class="@(context.Hover ? "show-btns" : "")" Color="transparent">
                                                    @icon
                                                </MIcon>
                                            </MButton>
                                        }
                                    </div>
                                </MRow>
                            </MCardTitle>
                        </MImage>
                    </MCard>
                </MHover>
            </MCol>
        }
    </MRow>
</MContainer>

@code
{
    private string[] _icons = new string[3] { "mdi-rewind", "mdi-play", "mdi-fast-forward" };
    private string _transparent = "rgba(255, 255, 255, 0)";

    private class ItemDemo
    {
        public string Title { get; set; }
        public string Text { get; set; }
        public string SubText { get; set; }
        public string Img { get; set; }
    }

    private List<ItemDemo> _items = new List<ItemDemo>
    {
        new ItemDemo
        {
            Title = "New Releases",
            Text = "It's New Release Friday",
            SubText = "Newly released songs. Updated daily.",
            Img = "https://images.unsplash.com/photo-1429514513361-8fa32282fd5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3264&q=80"
        },
        new ItemDemo
        {
            Title = "Rock",
            Text = "Greatest Rock Hits",
            SubText = "Lose yourself in rock tunes.",
            Img = "https://images.unsplash.com/photo-1498038432885-c6f3f1b912ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
        },
        new ItemDemo
        {
            Title = "Mellow Moods",
            Text = "Ambient Bass",
            SubText = "Chill beats to mellow you out.",
            Img = "https://images.unsplash.com/photo-1542320868-f4d80389e1c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3750&q=80"
        }
    };
}

<style>

.hover-misc-list .m-card {
  transition: opacity .4s ease-in-out;
}

.hover-misc-list .m-card:not(.on-hover) {
  opacity: 0.6;
 }

.hover-misc-list .show-btns {
  color: rgba(255, 255, 255, 1) !important;
}

</style>
